<template>
  <div class="sidebar">
    <el-menu
      class="sidebar-el-menu"
      :default-active="onRoutes"
      :collapse="collapse"
      background-color="#334256"
      text-color="#ffffff"
      active-text-color="#20a0ff"
      router
    >
      <el-menu-item index="Info">
        <i class="el-icon-menu"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>村民管理</span>
        </template>
        <el-menu-item index="Towns">村镇管理</el-menu-item>
        <el-menu-item index="VillagersMessage">村民留言</el-menu-item>
        <el-menu-item index="PopulationFlow">人口流动管理</el-menu-item>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>驻村管理</span>
        </template>
        <el-menu-item index="Cadre">干部信息管理</el-menu-item>
        <el-menu-item index="Visit">走访入户工作</el-menu-item>
        <el-menu-item index="WorkLog">工作日志</el-menu-item>
        <el-menu-item index="AskForLeave">请假信息管理</el-menu-item>
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>主管单位</span>
        </template>
        <el-menu-item index="Organization">组织管理</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>
<<script>
import bus from "../assets/js/bus";
export default {
  data() {
    return {
      collapse: false,
    };
  },
  computed:{
    onRoutes(){
      return this.$route.path.replace('/','');
    }
  },
  created(){
    // 透过 bus 进行组件间的通信，来折叠侧边栏
    bus.$on('collapse',msg =>{
      this.collapse = msg
    })
  }
};
</script>
<style scoped>
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  background-color: #334256;
  overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
  width: 0;
}

.sidebar-el-menu:not(.el-menu--collapse) {
  width: 150px;
}

.sidebar > ul {
  height: 100%;
}
</style>
